<template>
  <div class="web-log">
    <van-image width="60" height="60" :src="require('../assets/logo.19ca0be.png')" />

    <van-form validate-first  >
      <!-- 通过 pattern 进行正则校验 -->
      <van-field
        v-model="username"
        name="pattern"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ pattern, message: '请输入6-10位字符' }]"
        @input="inputUsername"
      >
        <template #right-icon>
          <van-icon v-if="show" name="clear" @click="del" />
        </template>
      </van-field>
      <!-- 通过 validator 进行函数校验 -->

      <van-field
        v-model="password"
        type="password"
        label="密码"
        name="validator"
        placeholder="请输入密码"
        :rules="[{ validator, message: '密码必须6到12位，且不能出现空格' }]"
      />

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" color="#FF5F16" @click="routeSeat()">登录</van-button>
      </div>
    </van-form>
  </div>
</template>
    
 <script>
import { Field, Form, Button } from "vant";
export default {
  data() {
    return {
      username: "",
      password: "",
      show: false,
      pattern: /^[a-zA-Z0-9_]{6,10}$/
    };
  },
  components: {
    Field,
    Form,
    Button
  },
  methods: {
    onSubmit(values) {
      //   console.log('submit', values);
    },
    validator(val) {
      return /^[\S]{6,12}$/.test(val);
    },
    inputUsername() {
      let msg = this.username.trim();

      if (msg.length == 0) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
    del() {
      this.username = "";
      this.show = false;
    },
    routeSeat() {
      this.$router.push({
        path: "ChoseSeat",
        query: {
          scheduleId: this.$route.query.scheduleId,
          filmId: this.$route.query.filmId,
          cinemaId: this.$route.query.cinemaId,
          date: this.$route.query.date,
          k: Math.random() * 12345689 + 11
        },
      });
    },
    
  }
};
</script>

 <style scoped>
.web-log {
  width: 100%;
  margin: 80px 0;
  text-align: center;
}
.van-field {
  height: 55px;
}

.van-form {
  margin: 40px 10px;
}
.van-button {
  margin: 60px 0;
  border-radius: 0;
}

.btn {
  border: none;
  font-size: 14px;
}

input::-webkit-input-placeholder {
  color: black;
}
</style>